<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable Table</title>
    <!-- 引入 element-ui 的样式文件 -->
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
</head>
<style>
    .red-text {
        color: red;
    }

    .red-te {
        color: red;
        font-weight: bold;
    }
</style>

<body>
    <div id="app">
        <el-row>
            <h2 style="text-align: center;">募捐活动管理</h2>
            <el-col :span="4">
                最小金额: <el-input-number v-model="minAmount" :min="0" :max="10000000" label="最小金额"
                    controls-position="right" placeholder="请输入最小金额"></el-input-number>
            </el-col>
            <el-col :span="4">
                最大金额: <el-input-number v-model="maxAmount" :min="0" :max="10000000" label="最大金额"
                    controls-position="right" placeholder="请输入最大金额"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input v-model="name" placeholder="对原因和名字进行检索"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="search">查询</el-button>
            </el-col>
            <el-col :span="4">
                <el-select v-model="filterStatus" placeholder="请选择状态">
                    <el-option label="所有" value=0></el-option>
                    <el-option label="已发布" value=5></el-option>
                    <el-option label="已完结" value=6></el-option>
                    <el-option label="异常" value=7></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-button @click="zzz">款项申请管理</el-button>
            </el-col>
        </el-row>

        <el-table :data="donationList" :default-sort="{prop: 'deadline', order: 'ascending'}">
            <el-table-column label="募捐ID" prop="donationId"></el-table-column>
            <el-table-column label="募捐人" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column label="募捐原因" prop="donationReason"></el-table-column>
            <el-table-column label="截止时间" prop="deadline" sortable>
                <template slot-scope="scope">
                    <span :style="getStyle(scope.row.deadline)">{{ calculateCompletion(scope.row.deadline) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="救助金额" prop="donationAmount" sortable></el-table-column>
            <el-table-column label="已募金额" prop="donatedAmount" sortable>
                <template slot-scope="scope">
                    <span :style="getDonatedAmountStyle(scope.row)">{{ scope.row.donatedAmount }}</span>
                </template>
            </el-table-column>
            <el-table-column label="完成度" prop="completion" sortable>
                <template slot-scope="scope">
                    <span>{{ ((scope.row.donatedAmount / scope.row.donationAmount) * 100).toFixed(2) }}%</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" prop="status" sortable>
                <el-row slot-scope="scope">
                    {{ getStatusText(scope.row.status) }}
                </el-row>
            </el-table-column>
            <el-table-column label="积分" prop="pointsSum"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status === 5" @click="declareEnd(scope.row.donationId)" type="primary" style="margin-top: 10px; ">结束</el-button>
                    <el-button v-if="scope.row.status === 6" @click="declareEnd(scope.row.donationId)" type="success" style="margin-top: 10px; ">继续</el-button>
                    <el-button v-if="scope.row.status === 5" @click="changeStatus(scope.row.donationId)" type="warning" style="margin-top: 10px; ">封锁</el-button>
                    <el-button v-if="scope.row.status === 7" @click="changeStatus(scope.row.donationId)" type="danger" style="margin-top: 10px; ">解封</el-button>                    
                </template>
            </el-table-column>

        </el-table>

    </div>

    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                statusMap: {
                    1: '已保存',
                    2: '已删除',
                    3: '已提交',
                    4: '审核中',
                    5: '已发布',
                    6: '已完结',
                    7: '异常'
                },
                donationList: [],
                minAmount: '',
                maxAmount: '10000000',
                name: '',
                filterStatus: '0',
                List:[],
            },
            watch: {
                filterStatus: function (newVal, oldVal) {
                    this.filterData(); // 监听filterStatus的变化，并在变化时调用filterData()方法
                }
            },
            created() {
                this.search(); // 页面加载时自动触发查询
            },

            methods: {
                // 筛选
                filterData() {
                    // alert(this.filterStatus)
                    if (this.filterStatus === "0") {
                         // 筛选状态为5,6,7的捐赠记录
                         return this.donationList = this.List.filter(item => [5, 6, 7].includes(item.status));
                        // return this.donationList = this.List; // 不进行筛选
                    }
                    this.donationList = this.List;
                    this.donationList = this.donationList.filter(item => {
                        if (typeof item.status === 'number' && !isNaN(parseInt(this.filterStatus))) { // 判断类型是否相同
                            return item.status === parseInt(this.filterStatus); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationList);
                },
                // 判断已募金额是否超过救助金额并返回对应的样式
                getDonatedAmountStyle(row) {
                    const donatedAmount = row.donatedAmount;
                    const donationAmount = row.donationAmount;
                    if (donatedAmount >= donationAmount) {
                        return 'color: red; font-weight: bold;';
                    } else {
                        return '';
                    }
                },
                // 判断是否超过当前时间并返回对应的样式F
                getStyle(deadline) {
                    const timestamp = new Date(deadline).getTime();
                    const now = new Date().getTime();
                    if (timestamp <= now) {
                        return 'color: red; font-weight: bold;';
                    } else {
                        return '';
                    }
                },
                //募捐活动
                declareEnd(donationId) {
                    const formData = new FormData();
                    formData.append('donationsId', parseInt(donationId));
                    axios.post('http://localhost:8888/api/donations/declareEnd', formData)
                        .then(response => {
                            if (response.data.code === 0) {
                                alert('操作成功');
                                this.search();
                                // 刷新数据或者其他操作
                            } else {
                                alert('操作失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('请求出错：', error);
                        });
                },
                //封锁成功

                changeStatus(donationId) {
                    const formData = new FormData();
                    formData.append('donationsId', parseInt(donationId));
                    axios.post('http://localhost:8888/api/donations/changeStatus', formData)
                        .then(response => {
                            if (response.data.code === 0) {
                                alert('操作成功');
                                // 刷新数据或者其他操作
                                this.search();
                            } else {
                                alert('操作失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('请求出错：', error);
                        });
                },
                search() {
                    axios.get('http://localhost:8888/api/donations/List', {
                        params: {
                            minAmount: this.minAmount,
                            maxAmount: this.maxAmount,
                            name: this.name
                        }
                    })
                        .then(response => {
                            this.donationList = [];
                            this.List = response.data.data;
                            // this.donationList=this.List
                            this.filterData()
                            this.calculateCompletion();
                        })
                        .catch(error => {
                            // 请求失败时的处理
                            console.error('请求出错：', error);
                        });
                },
                calculateCompletion(deadline) {
                    const timestamp = deadline;
                    const date = new Date(timestamp);

                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    return formattedDate;
                }

            },

            computed: {
                getStatusText() {
                    return (status) => {
                        return this.statusMap[status];
                    }
                }
            },
        });
    </script>
</body>

</html>